<template>
    <div class="fullScreen">
        <m-header :msg="'个人资料'"></m-header>
        <div class="he-fv bg-c-wh tx-s-14 tx-c-222">
            <div class="flex-box flex-pj line-img bor-b-g">
                <div>头像：</div>
                <div class="icon grzx_wdl" :style="{backgroundImage: 'url(' + avatar + ')'}"></div>
                
            </div>
            <div class="flex-box flex-pj line-box bor-b-g">
                <div>用户名：</div>
                <div>{{ bfUserInfo.username }}</div>
            </div>
            <div class="flex-box flex-pj line-box bor-b-g">
                <div>真实姓名：</div>
                <div>{{ bfUserInfo.realname }}</div>
            </div>
            <div class="flex-box flex-pj line-box bor-b-g" @click="openNext('/personalLoginPsw')">
                <div class="flex-box flex-f1 flex-pj">
                    <div>登录密码：</div>
                    <div>修改</div>
                </div>
                <div class="arrow_right mar-l"></div>
            </div>
            <div class="flex-box flex-pj line-box bor-b-g" @click="openNext('/personalDrawalPsw')">
                <div class="flex-box flex-f1 flex-pj">
                    <div>取款密码：</div>
                    <div v-if="bfUserInfo.bankCardBinded">修改</div>
                    <div v-if="!bfUserInfo.bankCardBinded">设置</div>
                </div>
                <div class="arrow_right mar-l"></div>
            </div>
            <div class="flex-box flex-pj line-box bor-b-g" @click="openNext('/personalCard')">
                <div>银行卡：</div>
                <div class="arrow_right mar-l"></div>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
import 'common/css/user.css'
import { mapGetters } from 'vuex'
import MHeader from '../../components/m-header'
export default { 
    data() {
        return { 
            avatar : ''
        }
    },
    created() {
        this.avatar = this.bfUserInfo.avatar || require('../../common/image/jzsb.png')
    },
    methods: {
        openNext (page) {
            if(page == '/personalCard' && !this.bfUserInfo.bankCardBinded){
                this.$router.push('/bindingCard')
            }else if(page == '/personalDrawalPsw' && !this.bfUserInfo.bankCardBinded){
                this.$toast('未绑定银行卡', 2000)
            }else{
                this.$router.push( page )
            }
        }
    },
    components: {
        MHeader
    },
    computed: {
        ...mapGetters([
            'bfUserInfo'
        ])
    }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
    .line-img
        padding: .25rem 0
        margin: 0 1rem
        line-height: 3.5rem
    .line-box
        padding: 1rem 0
        margin: 0 1rem
    .mar-l
        margin-left: .75rem
    .icon
        width: 3.25rem
        height: 3.25rem
        background-size: 100% 100%
        border-radius: 100% 100%
</style>

